<template>
	<view class="content">
		<view class="tab">
			<view class="item" :class="[currentIndex==0?'active':'']" @tap="changeStatus(0)">全部</view>
			<view class="item" :class="[currentIndex==1?'active':'']" @tap="changeStatus(1)">待参加</view>
			<view class="item" :class="[currentIndex==2?'active':'']" @tap="changeStatus(2)">已参加</view>
			<view class="item" :class="[currentIndex==3?'active':'']" @tap="changeStatus(3)">待付款</view>
			<view class="item" :class="[currentIndex==4?'active':'']" @tap="changeStatus(4)">已过期</view>
		</view>
		<view class="menpiao">
			<view class="item">
				<activity3></activity3>
				<view class="menpiao-info">
					<view class="name">
						普通入门票
					</view>
					<view class="op">
						<navigator url="/pages/order_detail/index" hover-class="navigator-hover">
							<view class="button-dcj">取电子票</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="item">
				<activity3></activity3>
				<view class="menpiao-info">
					<view class="name">
						普通入门票
					</view>
					<view class="op">
						<navigator url="/pages/payment/index" hover-class="navigator-hover">
							<view class="button-dzf">立即支付</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="item">
				<activity3></activity3>
				<view class="menpiao-info">
					<view class="name">
						普通入门票
					</view>
					<view class="op">
						<view class="button-ycj">活动评价</view>
					</view>
				</view>
			</view>
			<view class="item">
				<activity3></activity3>
				<view class="menpiao-info">
					<view class="name">
						普通入门票
					</view>
					<view class="op">
						<view class="button-ypj">感谢参与</view>
					</view>
				</view>
			</view>
			<view class="item">
				<activity3></activity3>
				<view class="menpiao-info">
					<view class="name">

					</view>
					<view class="op">
						<view class="button-yqx">删除门票</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Activity3 from '../../components/activity3.vue'
	export default {
		name: 'Order',
		data: function () {
			return {
				currentIndex: 0
			};
		},
		methods: {
			changeStatus(index) {
				// TODO 发送查询门票的请求

				//
				this.currentIndex = index;
			}
		},
		components: {
			Activity3
		},
	}
</script>

<style scoped>
	.tab {
		display: flex;
		background: #fff;
	}

	.tab .item {
		flex: 1;
		line-height: 90px;
		text-align: center;
		border-bottom: 6px solid transparent;
	}

	.tab .item.active {
		border-bottom: 6px solid #0099CC;
		color: #0099CC;
	}

	.menpiao .item {
		margin-top: 20px;
	}

	.menpiao-info {
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 20px 30px;
		border-top: 1px solid #eee;
	}

	.menpiao-info .name {
		margin-top: 18px;
	}


	.menpiao-info .button-dcj {
		border: 1px solid #339933;
		padding: 10px 20px;
		color: #339933;
	}

	.menpiao-info .button-dzf {
		border: 1px solid #FF0000;
		padding: 10px 20px;
		color: #FF0000;
	}

	.menpiao-info .button-ycj {
		border: 1px solid #0099CC;
		padding: 10px 20px;
		color: #0099CC;
	}

	.menpiao-info .button-ypj {
		border: 1px solid #003366;
		padding: 10px 20px;
		color: #003366;
	}

	.menpiao-info .button-yqx {
		border: 1px solid #888888;
		padding: 10px 20px;
		color: #888888;
	}
</style>
